<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <link href="bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
    <style>
        #box {
            width: 1000px;
            height: 5000px;

            background-color: blue;
        }

        #drawer {
            width: 300px;
            height: 50px;

            display: block;
            position: relative;
            left: -1000px;

            background-color: yellow;

        }

    </style>
</head>
<body>
<script>
    function btnClick() {
        if ($("#drawer").css("left") == "0px") {
            $("#drawer").animate({left: "-1000px"});

        } else {
            $("#drawer").animate({left: "0px"});

        }


    }


    function btn2Click() {


    }
</script>
<button onclick="btnClick()" class="btn btn-default">
slide left

</button>



<button class="btn btn-default" onclick="btn2Click()">


</button>
<div id="box">
    <div id="drawer">


    </div>


</div>

<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="bootstrap/dist/js/bootstrap.min.js"></script>
</body>
</html>